{% extends 'baykeshop/user/login.html' %}

{% load i18n %}

{% block title %}注册{% endblock %}

{% block login_title %}注册{% endblock %}

{% block form %}
<div id="register" class="pt-3">
    <b-field label="Username" :label-position="labelPosition">
        <b-input 
            maxlength="30"
            :has-counter="false"
            icon="account"
            v-model="username"
            placeholder="Username">
        </b-input>
    </b-field>
    <b-field label="Password" :label-position="labelPosition">
        <b-input 
            type="password" 
            password-reveal
            :has-counter="false"
            maxlength="30"
            icon="lock"
            v-model="password"
            placeholder="Password">
        </b-input>
    </b-field>
    <b-field label="Email" :label-position="labelPosition" grouped group-multiline>
        <b-input 
            type="email" 
            :has-counter="false"
            maxlength="30"
            icon="email"
            v-model="email"
            @input="changeCode"
            expanded
            placeholder="Email">
        </b-input>
        <p class="control">
            <b-input 
                type="text" 
                maxlength="4" 
                placeholder="验证码" 
                v-model="code" 
                :has-counter="false" 
                v-if="email" 
                expanded>
            </b-input>
        </p>
        <p class="control">
            <b-button class="button is-primary" :disabled="isshow" @click="getCode">{$ codetext $}</b-button>
        </p>
    </b-field>
    <b-field>
        <b-button 
            type="is-primary"
            @click="login" 
            expanded 
            :disabled="username && password && email && code ? false : true">
            注册
        </b-button>
    </b-field>

</div>

{% endblock %}


{% block vue %}
    <script>
        var register = new Vue({
            el: '#register',
            delimiters: ['{$', '$}'],
            data:{
                labelPosition: 'on-border',
                code: '',
                username: '',
                password: '',
                email: '',
                codetext: '获取验证码',
                isshow: true,
                date: 60
            },
            methods: {
                changeCode(){
                    if (this.email){
                        this.isshow = false
                    }
                },

                getCode(){
                    request({
                        url: '{% url "baykeshop:obtain-code" %}',
                        method: 'post',
                        data: {
                            email: this.email
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.status == 201 || res.status == 200){
                            bayke.toastMessage('is-success', '验证码已发送，请前往邮箱查收！')
                        }else{
                            bayke.toastMessage('is-danger', '验证码发送失败！')
                        }
                    })
                },

                login(){
                    request({
                        url: '{% url "baykeshop:register-api" %}',
                        method: 'post',
                        data: {
                            username: this.username,
                            password: this.password,
                            email: this.email,
                            code: this.code
                        }
                    }).then(res => {
                        if (res.status == 201 || res.status == 200){
                            bayke.toastMessage('is-success', '注册成功，请登录！')
                            setTimeout(() => {
                                location.href = '{% url "baykeshop:login" %}'
                            }, 2000);
                            
                        }else{
                            bayke.toastMessage('is-danger', '注册失败，请检查！')
                        }
                    })
                }
            },
        })
    </script>
{% endblock %}
    